
/**
 @ Name：layui.regionSelect 中国省市区选择器
         注意：本文件只是一个扩展组件的示例，暂时没有写相关功能
 @ Author：贤心
 @ License：MIT 
 */
 
layui.define('form', function(exports){ //假如该组件依赖 layui.form
  var $ = layui.$
  ,form = layui.form
  var MOD_NAME = 'qileSteps'; //步骤条
  var obj = {
    config:{
           //选择器id或class
          elem: '#test'
          ,type:1
          //候选项数据[{id:"1",name:"名称1",status:0},{id:"2",name:"名称2",status:1}]
          ,data: [
           {title:'√',name:"第一步",progress:'finished',desc:""}
          ,{title:'√',name:"第二步",progress:'current',desc:""}
          ,{title:'3',name:"第三步",progress:'todo',desc:""}
          ,{title:'3',name:"第四步",progress:'todo',desc:""}
          ] 
          ,style:[
           {
            finished:{bg:'#5FB878',color:"#fff",font:'宋体'} //完成
           ,current:{bg:'#73b428',color:"#fff",font:'宋体'}  //当前
           ,todo:{bg:'#eee',color:"#000",font:'宋体'}       //等待进行
           }
       
          ]
          ,title:true   //步骤标题
          ,width:'300'  //全局宽度
          ,bg:'#5FB878'
       
      }
    ,createSteps:function(){
        var o=this,c=o.config,d = c.data;
        
        $E = $(c.elem);
       
        if(c.style == false){
          
        }
        if(c.type ==1){
         var html = '';
            html +='<div class="ui-steps">';
            // 开始
                 for(var i=0;i<d.length;i++){
                   var  progress = c.style[0][d[i]['progress']]; //匹配进度样式
                  html +='<div class="wrap">';
  
                  html +='<div class="'+d[i]['progress']+'" style="width:'+c.width+'px;background-color:'+progress.bg+';color:'+progress.color+';font-family:'+progress.font+'">';
                  html +'<label>';

                 if(c.title == true){
                   html +='<span class="round">'+d[i]['title']+'<i class="ui-icon icon-pc-right"></i></span>';
                  }else{
                   html +='<span style="margin-left:30px;"></span>'; 
                  }  
        

                  html +='<span>'+d[i]['name']+'</span></label>';
                  if(i < d.length-1){
                     html +='<i class="triangle-right-bg"></i><i class="triangle-right" style="border-color:transparent transparent transparent  '+progress.bg+'"></i>';             
                   }
              
                   html +='</div>';
                   html +='</div>';
                 
                    }
        //   // 结束
            html +='</div>'; 
        }else if(c.type ==2){
       
           var html = '';
            html +='<div class="ui-steps-round">';
            // // 开始
                 for(var i=0;i<d.length;i++){
                  var  progress = c.style[0][d[i]['progress']]; //匹配进度样式

                    html +='<div class="'+d[i]['progress']+'" style="width:'+c.width+'px;color:'+progress.color+';font-family:'+progress.font+'">';

            
                    html +='<div class="wrap">';
    

                     if(c.title == true){
                       html +='<span class="round" style="border:2px solid'+progress.bg+';background-color:'+progress.bg+'">'+d[i]['title']+'</span>';
                      
                      }else{
                       html +='<span style="margin-left:30px;"></span>'; 
                      }  
                      var  width = c.width-50;
                    
                    if(i < d.length-1){
                          html +='<div class="bar" style="width:'+width+'px;background-color:'+progress.bg+'"></div>';      
                     }
                     html +='</div>';
                     html +='<label style="'+progress.color+'">'+d[i]['name']+'</label>';
                     html +='</div>';
                 
                 
                    } 
            // 结束
            html +='</div>';  
        }       
         $E.html(html);

      },
  };
  // var obj =function(config){
  //      this.a ='1234';
    //   //初始化设置参数
    //   this.config = {
    //        //选择器id或class
    //       elem: 'test1',
    //       //候选项数据[{id:"1",name:"名称1",status:0},{id:"2",name:"名称2",status:1}]
    //       data: ["第一步","第二步","第三部"],     
      
    //       //默认选中值
    //       selected: [],
    //   };
    //   this.config = $.extend(this.config,config);
    //   createSteps:function(){
    //     var o=this,c=o.config,d = c.data;
    //     $E = $(c.elem);
    //     var html = '';
   
    //         html +='<div class="ui-steps">';
    //         // 开始
    //              for(var i=0;i<d.length;i++){
    //               html +='<div class="wrap">';
    //               html +='<div class="finished">';
    //               html +='<label><span class="round">1<i class="ui-icon icon-pc-right"></i></span><span>第一步 #4AA4D5</span></label><i class="triangle-right-bg"></i><i class="triangle-right"></i>';
    //               html +='</div>';
    //               html +='</div>';
    //                 }

    //         // html +='<div class="wrap">';
    //         // html +='<div class="current">';
    //         // html +='<label><span class="round">2 </span><span>第二步 #333333</span></label><i class="triangle-right-bg"></i><i class="triangle-right"></i>';
    //         // html +='</div>';
    //         // html +='</div>';

    //         // html +='<div class="wrap">';
    //         // html +='<div class="todo">';
    //         // html +='<label><span class="round">3</span><span>第三步 #999999</span></label>';
    //         // html +='</div>';
    //         // html +='</div>';
    //         // 结束
    //         html +='</div>';
    //     $E.html(html);

    //   };

    // };
 //  //渲染视图
 // obj.prototype.render = function(){
 //    var o=this,c=o.config,f=c.field;
 //   //创建选项
 //    o.createSteps();
 //  }
  //字符常量
  // ,MOD_NAME = 'regionSelect', ELEM = '.layui-regionSelect'
  
  // //外部接口
  // ,regionSelect = {
  //   index: layui.regionSelect ? (layui.regionSelect.index + 10000) : 0
    
  //   //设置全局项
  //   ,set: function(options){
  //     var that = this;
  //     that.config = $.extend({}, that.config, options);
  //     return that;
  //   }
    
  //   //事件监听
  //   ,on: function(events, callback){
  //     return layui.onevent.call(this, MOD_NAME, events, callback);
  //   }
  // }
  
  // //操作当前实例
  // ,thisIns = function(){
  //   var that = this
  //   ,options = that.config
  //   ,id = options.id || options.index;
    
  //   return {
  //     reload: function(options){
  //       that.reload.call(that, options);
  //     }
  //     ,config: options
  //   }
  // }
  
  // //构造器
  // ,Class = function(options){
  //   var that = this;
  //   that.index = ++regionSelect.index;
  //   that.config = $.extend({}, that.config, regionSelect.config, options);
  //   that.render();
  // };
  
  // //默认配置
  // Class.prototype.config = {
  //   layout: ['province', 'city', 'county', 'street'] //联动层级
  //   //其他参数
  //   //……
  // };
  
  // //渲染视图
  // Class.prototype.render = function(){
  //   var that = this
  //   ,options = that.config;

  //   options.elem = $(options.elem);
    
    
  //   options.elem.html('<div class="layui-text">您已经成功运行了：<strong>layui.regionSelect</strong> 中国省市区选择组件。<br><span style="color: #FF5722;">但是注意：</span>这只是一个扩展组件的示例，暂时没有写相关功能。<br>详见：<a href="https://fly.layui.com/extend/demo/" target="_blank">https://fly.layui.com/extend/demo/</a></div>');
  // }
  
  // //核心入口
  // regionSelect.render = function(options){
  //   var ins = new Class(options);
  //   return thisIns.call(ins);
  // };
  
  // //加载组件所需样式
  // layui.link(layui.cache.base + 'regionSelect/regionSelect.css?v=1', function(){
  //   //样式加载完毕的回调
    
  // }, 'regionSelect'); //此处的“regionSelect”要对应 regionSelect.css 中的样式： html #layuicss-regionSelect{}
    //输出test接口
  exports(MOD_NAME, obj);
    //输出模块
  // exports(MOD_NAME, function (config) {
  //   // console.log(config);
  //   var _this = new obj(config);
  //   _this.render();
  //   return _this;
  // });
});